<template>
  <a-table
    ref="table"
    size="middle"
    :scroll="{x:true, y:600}"
    bordered
    rowKey="id"
    :columns="columns"
    :dataSource="dataSource"
    :pagination="false"
    class="j-table-force-nowrap">
    <template slot="providerNameSlot" slot-scope="text, record">
      <j-ellipsis :value="text" :length="10"></j-ellipsis>
    </template>
    <template slot="productNameSlot" slot-scope="text, record">
      <j-ellipsis :value="text" :length="10"></j-ellipsis>
    </template>
    <template slot="classifyNameSlot" slot-scope="text, record">
      <j-ellipsis :value="text" :length="10"></j-ellipsis>
    </template>
    <span slot="action" slot-scope="text, record">
      <a-button type="primary" v-if="value === record.id" @click="handleChange('')" :disabled="formDisabled">已选择</a-button>
      <a-button type="primary" ghost style="padding: 0 20px;" v-else  @click="handleChange(record.id)" :disabled="formDisabled">选择</a-button>
    </span>
  </a-table>
</template>

<script>
export default{
  name: 'LogisticsWaybillDetailFormTable',
  props: {
    value: {
      type: String,
      default: ''
    },
    dataSource: {
      type: Array,
      default: () => []
    },
    columns: {
      type: Array,
      default: () => []
    },
    formDisabled: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    handleChange(id){
      this.$emit('input', id);
      this.$emit('change', id);
    }
  }
}
</script>